<template>
  <p
    style="line-height: 3.125rem; font-size: 1rem; font-weight: bold"
    class="main_text"
  >
    回收指导价
  </p>
  <div class="main">
    <!-- #################################### 表单 #################################### -->
    <div class="content p20">
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        border
        style="width: 100%"
        max-height="700"
      >
        <el-table-column
          prop="startAt"
          label="更新日期"
          width="250"
          align="center"
        >
          <template #default="item">
            <span v-show="!show"></span>{{ item.row.startAt }}
            <div
              style="
                display: flex;
                align-items: center;
                margin-top: 1.25rem;
                justify-content: center;
              "
              v-show="show"
            >
              <div style="display: flex; align-items: center; flex-wrap: wrap">
                <div class="demo-date-picker">
                  <div class="block">
                    <el-date-picker
                      @change="dataTimeChange"
                      v-model="item.row.startAt"
                      type="date"
                      placeholder="请选择更新日期"
                      :size="size"
                      :disabled="!show"
                    />
                  </div>
                </div>
                <div
                  style="
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: 1.25rem;
                  "
                >
                  <!-- <el-button class="solid">查询</el-button> -->
                  <el-button class="hollow" @click="reset" style="width: 200px"
                    >重置</el-button
                  >
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="carType" label="类别" align="center" />
        <el-table-column label="吨位区间" align="center">
          <template #default="item">
            {{ item.row.carWeightMin }} - {{ item.row.carWeightMax }}
          </template>
        </el-table-column>
        <el-table-column label="参考托运价（元）" align="center">
          <template #default="item">
            <span v-show="!show">
              {{ item.row.guidePriceMin }} - {{ item.row.guidePriceMax }}
            </span>
            <div v-show="show" style="display: block; align-items: center">
              <el-input v-model="item.row.guidePriceMin" :disabled="!show" />-
              <el-input v-model="item.row.guidePriceMax" :disabled="!show" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center">
          <template #default="item">
            <span
              v-if="!show && (item.row.note != '' && item.row.note != null)"
              >{{ item.row.note }}</span
            >
            <span
              v-else-if="
                !show && (item.row.note == '' || item.row.note == null)
              "
              >--</span
            >
            <div v-else>
              <el-input
                v-model="item.row.note"
                rows="3"
                type="textarea"
                :disabled="!show"
                v-if="item.row.note !== null"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140" colspan="5" align="center">
          <template #default="item">
            <el-button class="none" v-show="!show" @click="show = !show"
              >修改定价</el-button
            >
            <div
              style="display: flex; justify-content: center; flex-wrap: wrap"
              v-show="show"
            >
              <el-button
                class="hollow"
                @click="cancleSet"
                style="margin-left: 0"
                >取消</el-button
              >
              <el-popconfirm
                title="是否确定修改?"
                confirm-button-text="是"
                cancel-button-text="否"
                :icon="InfoFilled"
                icon-color="#626AEF"
                @confirm="publish"
                @cancel="cancelEvent"
              >
                <template #reference>
                  <el-button
                    class="solid"
                    style="margin-top: 1.25rem; margin-left: 0"
                    >发布</el-button
                  >
                </template>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import {
  RequestPlatformValuation,
  RequestPlatformValuationAmend,
} from "@/api/path/index.js";
import { ElMessage } from "element-plus";
import moment from "moment";
const tableData = ref<any>([]);
const show = ref(false);

const beforTime = ref();
onMounted(() => {
  requestPlatformValuation();
});
const requestPlatformValuation = async () => {
  const a = await RequestPlatformValuation();
  for (let i = 0; i < a.resultObj.length; i++) {
    tableData.value = tableData.value.concat(a.resultObj[i]);
  }
  beforTime.value = tableData.value[0].startAt;
  getSpanArr(tableData.value);
};
const mergeObj = ref({});
const mergeArr = ref(["carType", "startAt"]);
const getSpanArr = (data) => {
  mergeArr.value.forEach((key, index1) => {
    let count = 0; // 用来记录需要合并行的起始位置
    mergeObj.value[key] = []; // 记录每一列的合并信息
    data.forEach((item, index) => {
      // index == 0表示数据为第一行，直接 push 一个 1
      if (index === 0) {
        mergeObj.value[key].push(1);
      } else {
        // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
        if (item[key] === data[index - 1][key]) {
          console.log("測試", item.key);
          mergeObj.value[key][count] += 1;
          mergeObj.value[key].push(0);
        } else {
          // 如果当前行和上一行其值不相等
          count = index; // 记录当前位置
          mergeObj.value[key].push(1); // 重新push 一个 1
        }
      }
    });
  });
};
// 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 }
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 5) {
    // Assuming "操作" is the 6th column (index 5)
    // Merge the "操作" column for the first row only
    if (rowIndex === 0) {
      return [tableData.value.length, 1]; // Merge the entire "操作" column into one row
    } else {
      return [0, 0]; // Return 0 for other rows to avoid displaying content in those cells
    }
  }
  // 判断列的属性
  if (mergeArr.value.indexOf(column.property) !== -1) {
    // 判断其值是不是为0
    if (mergeObj.value[column.property][rowIndex]) {
      return [mergeObj.value[column.property][rowIndex], 1];
    } else {
      // 如果为0则为需要合并的行
      return [0, 0];
    }
  }
};
/**
 * 点击取消
 */
const cancleSet = () => {
  show.value = !show.value;
};
/**
 * 点击发布
 */
const publish = async () => {
  show.value = !show.value;
  console.log(123, tableData.value);
  const a = await RequestPlatformValuationAmend(tableData.value);
  if (a.msg == "操作成功！") {
    ElMessage.success("修改成功");
  }
};
/**
 * 取消发布
 */
const cancelEvent = () => {
  show.value = !show.value;
};
const dataTimeChange = (e: any) => {
  const time = moment(e).format("yyyy-MM-DD HH:mm:ss");
  for (let i = 0; i < tableData.value.length; i++) {
    tableData.value[i].startAt = time;
  }
  console.log("时间改变", tableData.value);
};
const reset = () => {
  for (let i = 0; i < tableData.value.length; i++) {
    tableData.value[i].startAt = beforTime;
  }
  console.log("时间改变", tableData.value);
};
</script>

<style scoped lang="scss">
.main {
  width: 100%;

  .top {
    width: 100%;
    background-color: #fff;
  }

  .content {
    width: 100%;
    background-color: #fff;
  }
}
</style>
